<template>
  <PostCard />

</template>

<script>
import FileCard from "@/components/cards/FileCard.vue";
import KnowlegeCard from "@/components/cards/KnowlegeCard.vue";
import QuestionCard from "@/components/cards/QuestionCard.vue";
import RecommendationCard from "@/components/cards/RecommendationCard.vue";
import PostCard from "@/components/cards/PostCard.vue"

export default {
  components: { PostCard,RecommendationCard, QuestionCard, KnowlegeCard, FileCard},
  data() {
    return {
      newPostContent: '',
      tags: [
        { id: 1, name: '编程', selected: false },
        { id: 2, name: 'AI', selected: false },
        { id: 3, name: '游戏', selected: false },
        { id: 4, name: '设计', selected: false },
        { id: 5, name: '科幻', selected: false },
        { id: 6, name: '数学', selected: false },
        { id: 7, name: '艺术', selected: false },
      ],
      posts: Array.from({ length: 8 }, (_, i) => ({
        id: i + 1,
        type: ['普通帖子', '提问帖子', '附件帖子', '投票帖子'][i % 4],
        title: `示例帖子 ${i + 1}`,
        content: `这是示例帖子 ${i + 1} 的内容...`,
        likes: Math.floor(Math.random() * 100),
        comments: Math.floor(Math.random() * 30),
      })),
      hotPosts: [
        { id: 1, title: '深度学习入门' },
        { id: 2, title: '如何写高效的 Java 代码' },
        { id: 3, title: 'AI 时代的前端开发' },
      ],
    };
  },
  methods: {
    selectTag(tag) {
      this.tags.forEach(t => (t.selected = false));
      tag.selected = true;
    },
    addTag() {
      console.log('创建新标签');
    },
    aiReply() {
      console.log('AI 回帖功能');
    }
  }
};
</script>

<style scoped>
.forum-container {
  max-width: 1200px;
  margin: 20px auto;
}

/* 快捷发帖栏 */
.quick-post {
  margin-bottom: 20px;
}

/* 标签墙 */
.tag-wall {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 8px;
  background: #f6f6f6;
  border-radius: 8px;
  overflow-x: auto;
  white-space: nowrap;
}

.clickable-tag {
  cursor: pointer;
  transition: all 0.2s;
}

.clickable-tag:hover {
  transform: scale(1.1);
}

/* 帖子列表布局 */
.content {
  display: flex;
  gap: 20px;
}

/* 帖子列表 */
.post-list {
  flex: 3;
}

/* 帖子卡片 */
.post-card {
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.post-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.普通帖子 { background-color: #f0f9eb; color: #67c23a; }
.提问帖子 { background-color: #ecf5ff; color: #409eff; }
.附件帖子 { background-color: #fdf6ec; color: #e6a23c; }
.投票帖子 { background-color: #fef0f0; color: #f56c6c; }

.post-footer {
  display: flex;
  gap: 10px;
}

/* 侧边栏 */
.sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 分页 */
.pagination {
  text-align: center;
  margin-top: 20px;
}
</style>
